$(function () {
    require(['zrender', 'zrender/shape/Line', 'zrender/shape/Text'], function (zrender, LineShape, TextShape) {
        $.ajaxSettings.async = false;// 同步
        var $left = $('#left');
        var $hardware_list = $('#hardware_list');
        var $canvas = $('#canvas');
        var $property = $('#property');
        var $property_name = $('#property_name');
        var $property_btn_modify = $('#property_btn_modify');
        var canvasOffset = $canvas.offset();
        var $system_select=$('#system_select');
        var $save_btn=$('#save_btn');//保存按钮
        var $save_modal=$('#save_modal');//保存模态框
        var $temp_name=$('#temp_name');//模板名称输入框
        var $save_modal_btn=$('#save_modal_btn');//保存模态框保存按钮
        var $save_success_modal=$('#save_success_modal');//保存成功模态框
        var $box_inner=$('#box_inner');//子视图
        var $inner_canavs = $("#inner_canavs");
        // var numArr = [];
        // var nums=0;
        var zr = zrender.init(document.getElementById('render'));
        zr.render();
       
         // 渲染页面左侧导航栏
         $.getJSON('json/hardware.json', function (res) {
            for (var i = 0, len = res.length; i < len; i++) {
                $hardware_list.append('<li hostId="' + res[i].id + '" class="clearfix component">' +
                        '<div class="pull-left chart"><img src="' + res[i].img + '" /></div><div class="pull-left des">' + res[i].hostName + '</div></li>')
                $box_inner.find('.left ul').append('<li hostId="' + res[i].id + '" class="clearfix component">' +
                        '<div class="pull-left chart"><img src="' + res[i].img + '" /></div><div class="pull-left des">' + res[i].hostName + '</div></li>')
            }
        });

        var allOption = null;
        if(GLOBAL_DEBUG){
            $.get(GLOBAL_AJAX_URL.innerdata,function(res){
                allOption = res.data;
            })
            }else {
            var res = window.localStorage.getItem("tw");
            res = JSON.parse(res);
            
            if(!res){
                    res = {
                    mes:'成功',
                    data:[]
                }
            }
                allOption = res.data;
        }
        $.each(allOption,function(i,v){
            var $option=$('<option value="'+v.dashboardName+'">'+v.dashboardName+'</option>');
            $system_select.append($option);
        });
        
        // 给数组原型添加去除指定值的方法
        Array.prototype.removeByValue = function (val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == val) {
                    this.splice(i, 1);
                    break;
                }
            }
        };
        // 给数组原型添加获取指定值的方法
        Array.prototype.hasByValue = function (val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == val) {
                    return true;
                }
            }
            return false;
        };
        // 主页面 线条操作
        // 添加绘制线条的方法 
        function addLine(xStart, yStart, xEnd, yEnd,id) {
            var line = new LineShape({
                id:id,
                style: {
                    xStart: xStart,
                    yStart: yStart,
                    xEnd: xEnd,
                    yEnd: yEnd,
                    strokeColor: 'green',
                    lineWidth: 2,
                    lineType: 'solid'
                },
                //  绘制完成后的回掉函数  
                onmouseover: function (param) {
                    
                    // param 为当前对象  param.event 里面包含这个对象的各种方法
                    zr.addHoverShape(new TextShape({
                        style: {
                            x: param.event.offsetX + 10,
                            y: param.event.offsetY - 10,
                            color: 'green',
                            text: '状态很好，连接通畅'
                        },
                        highlightStyle: {
                            strokeColor: 'green',
                            lineWidth: 0
                        }
                    }));
                },
                //  clickable: true, 开始起点击事件
                clickable: true,
                // 回掉
                ondblclick: function () {
                    
                    var $firstBox = this.firstBox;
                    var $secondBox = this.secondBox;
                    // $firstBox.data('lineList').removeByValue(this);
                    // $secondBox.data('lineList').removeByValue(this);
                    $firstBox.data('lineList').removeByValue(this);
                    $secondBox.data('lineList').removeByValue(this);
                    $firstBox.data('anotherBox').removeByValue($secondBox[0]);
                    $secondBox.data('anotherBox').removeByValue($firstBox[0]);
                    zr.delElement(this);
                    zr.refresh();
                }
            });
            zr.addElement(line);
            zr.render();
            return line;
        }
        // 线条的修改
        function modifyLine(line, xStart, yStart, xEnd, yEnd) {
            zr.modElement(line, {
                style: {
                    xStart: xStart,
                    yStart: yStart,
                    xEnd: xEnd,
                    yEnd: yEnd
                }
            });
            zr.render();
            return line;
        }
        
       
        // 点击页面 取消添加线条
        $(document).click(function () {
            $canvas.find('.chart-box').removeClass('line');
        });
        // 修改组件 编辑完成
        $property.on('click', '.glyphicon-remove', function () {
            $property.addClass('hide');
        });

        // 初始化设置
        // 左侧导航栏样式
        $left.find('ul').height($left.height() - 30);
        $(window).resize(function () {
            $left.find('ul').height($left.height() - 30);
        }); 
        // 左侧初始化拖动设置
        $left.find('li').draggable({
            helper: 'clone', // 设置clone 放置的时候必须要有这个属性  复制
            cursor: 'crosshair', // 鼠标光标设置
            // 哈希设置
            cursorAt: {
                left: 100,
                top: 34
            },
            revert: 'invalid',  // 放置到指定区域之外的时候,被拖拽的元素 返回到初始位置  valid 则与之相反
            revertDuration: 360, // 被拖拽的元素还原动画的持续时间   必须 revert  为true(有值)
            zIndex: 666 // 层级
        });
       
        // 主页面拖拽放置设置
        $property.draggable();
        
        $canvas.droppable({
            accept: '#left li', // 控制哪个可拖拽元素可被 droppable 接受。
            tolerance: 'fit',  // draggable 完全重叠在 droppable 上。
            // 放置完成后的回掉函数
            drop: function (event, ui) {
                var offset = ui.offset;
                var left = offset.left - canvasOffset.left;
                var top = offset.top - canvasOffset.top;
                var $drag = ui.draggable;
                var hardware_id = $drag.attr('hostId');
               
                var $box = null;
                // 根据 attr('hostId')值来渲染相对应的元素
                switch (hardware_id) {
                    case '1':
                        $.getJSON('json/switchboard.json', function (res) {
                            var nameClass = '';
                            if (res.status == '1') {
                                nameClass = 'white';
                            } else if (res.status == '2') {
                                nameClass = 'yellow';
                            } else if (res.status == '3') {
                                nameClass = 'red';
                            }
                            
                            $box = $('<a hostId="' + res.id + '" proName="' + res.hostName + '" href="#" class="chart-box"><div class="info ' + nameClass + '">' + res.info + '</div><div class="chart"><img src="' + res.img + '" /><span class="name ' + nameClass + '">' + res.hostName + '</span></div><div class="operation"><span title="编辑" class="glyphicon glyphicon-edit"></span><span title="连线" class="glyphicon glyphicon-sort"></span><span title="删除" class="glyphicon glyphicon-trash"></span></div></a>').css({
                                position: 'absolute',
                                top: top,
                                left: left
                            });
                        });
                        break;
                    case '2':
                        $.getJSON('json/server.json', function (res) {
                            var nameClass = '';
                            if (res.status == '1') {
                                nameClass = 'white';
                            } else if (res.status == '2') {
                                nameClass = 'yellow';
                            } else if (res.status == '3') {
                                nameClass = 'red';
                            }
                            $box = $('<a hostId="' + res.id + '" proName="' + res.hostName + '" href="#" class="chart-box"><div class="info ' + nameClass + '">' + res.info + '</div><div class="chart"><img src="' + res.img + '" /><span class="name ' + nameClass + '">' + res.hostName + '</span></div><div class="operation"><span title="编辑" class="glyphicon glyphicon-edit"></span><span title="连线" class="glyphicon glyphicon-sort"></span><span title="删除" class="glyphicon glyphicon-trash"></span></div></a>').css({
                                position: 'absolute',
                                top: top,
                                left: left
                            });
                        });
                        break;
                    case '3':
                        $.getJSON('json/system.json', function (res) {
                            var nameClass = '';
                            if (res.status == '1') {
                                nameClass = 'white';
                            } else if (res.status == '2') {
                                nameClass = 'yellow';
                            } else if (res.status == '3') {
                                nameClass = 'red';
                            }
                            
                            $box = $('<a hostId="' + res.id + '" proName="' + res.hostName + '" href="' + res.url + '" class="chart-box"><div class="info ' + nameClass + '">' + res.info + '</div><div class="chart"><img src="' + res.img + '" /><span class="name ' + nameClass + '">' + res.hostName + '</span></div><div class="operation"><span title="编辑" class="glyphicon glyphicon-edit"></span><span title="连线" class="glyphicon glyphicon-sort"></span><span title="删除" class="glyphicon glyphicon-trash"></span></div></a>').css({
                                position: 'absolute',
                                top: top,
                                left: left
                            });
                        });
                        break;
                    default:
                        $.getJSON('json/server.json', function (res) {
                            var nameClass = '';
                            if (res.status == '1') {
                                nameClass = 'white';
                            } else if (res.status == '2') {
                                nameClass = 'yellow';
                            } else if (res.status == '3') {
                                nameClass = 'red';
                            }
                            $box = $('<a hostId="' + res.id + '" proName="' + res.hostName + '" href="' + res.url + '" class="chart-box"><div class="info">' + res.info + '</div><div class="chart"><img src="' + res.img + '" /><span class="name ' + nameClass + '">' + res.hostName + '(' + res.statusInfo + ')</span></div><div class="operation"><span title="编辑" class="glyphicon glyphicon-edit"></span><span title="连线" class="glyphicon glyphicon-sort"></span><span title="删除" class="glyphicon glyphicon-trash"></span></div></a>').css({
                                position: 'absolute',
                                top: top,
                                left: left
                            });
                        });
                        break;
                }
                // 设置当前渲染的元素data() 为连线做准备
                $box.data('lineList', []);
                $box.data('anotherBox', []);
                // 删除组件
                $box.find('.glyphicon-trash').click(function () {
                    var lineList = $box.data('lineList');
                    var anotherBox = $box.data('anotherBox');
                    for (var i = 0, ilen = lineList.length; i < ilen; i++) {
                        var itemLine = lineList[i];
                        var firstBox = itemLine.firstBox;
                        var secondBox = itemLine.secondBox;
                        if (firstBox[0] == $box[0]) {
                            secondBox.data('lineList').removeByValue(itemLine);
                        } else {
                            firstBox.data('lineList').removeByValue(itemLine);
                        }
                        zr.delElement(itemLine);
                    }
                    for (var j = 0, jlen = anotherBox.length; j < jlen; j++) {
                        $(anotherBox[j]).data('anotherBox').removeByValue($box[0]);
                    }
                    // 画布重新渲染 (去除线条)
                    zr.refresh();
                    // 移除当前删除的元素
                    $box.remove();
                    return false;
                });
                // 连线

                $box.find('.glyphicon-sort').click(function () {
                    $(this).parents('.chart-box').addClass('line');
                    var $shouldLine = $canvas.find('.chart-box.line');
                    var size = $shouldLine.size();
                    if (size == 2) {
                        var $firstBox = $($shouldLine[0]);
                        var $secondBox = $($shouldLine[1]);
                        // 创建当前的时间戳
                        var nums = (new Date()).valueOf();
                        if($firstBox.attr("saveAddLine")){
                            var addAttr = $firstBox.attr("saveAddLine");
                            $firstBox.attr("saveAddLine",nums +"-"+ addAttr);
                           
                        }else {
                            $firstBox.attr("saveAddLine",nums+"");
                           
                        }
                        if($secondBox.attr("saveAddLine")){
                            var addAttr = $secondBox.attr("saveAddLine");
                            $secondBox.attr("saveAddLine",nums +"-"+ addAttr);
                            
                        }else {
                            $secondBox.attr("saveAddLine",nums+"");
                            
                        }
                        $shouldLine.removeClass('line');
                       
                        if ($firstBox.data('anotherBox').hasByValue($secondBox[0])) {
                            return false;
                        }
                        var xStart = parseInt($firstBox.css('left'));
                        var yStart = parseInt($firstBox.css('top'));
                        var xEnd = parseInt($secondBox.css('left'));
                        var yEnd = parseInt($secondBox.css('top'));
                        var startWidth = $firstBox.width();
                        var startHidth = $firstBox.height();
                        var endWidth = $secondBox.width();
                        var endHidth = $secondBox.height();
                        var line = addLine(xStart + startWidth / 2, yStart + startHidth / 2, xEnd + endWidth / 2, yEnd + endHidth / 2,nums);
                        line.firstBox = $firstBox;
                        line.secondBox = $secondBox;
                        $firstBox.data('lineList').push(line);
                        $firstBox.data('anotherBox').push($secondBox[0]);
                        $secondBox.data('lineList').push(line);
                        $secondBox.data('anotherBox').push($firstBox[0]);
                    }
                    return false;
                });

                // 编辑
                $box.find('.glyphicon-edit').click(function () {
                    var $box = $(this).parents('.chart-box');
                    $property.data('target', $box);
                    $property_name.val($box.attr('proName'));
                    $property.removeClass('hide');
                    return false;
                });
                // 画布内拖放事件
                $box.draggable({
                    containment: 'parent',
                    snap: true,
                    snapMode: 'outer',
                    start: function () {
                        $canvas.find('.chart-box').addClass('border');
                        $(this).css('zIndex', 600);
                    },
                    drag: function () {
                        var $this = $(this);
                        var lines = $this.data('lineList');
                        for (var i = 0, len = lines.length; i < len; i++) {
                            var $firstBox = lines[i].firstBox;
                            var $secondBox = lines[i].secondBox;
                            var xStart = parseInt($firstBox.css('left'));
                            var yStart = parseInt($firstBox.css('top'));
                            var xEnd = parseInt($secondBox.css('left'));
                            var yEnd = parseInt($secondBox.css('top'));
                            var startWidth = $firstBox.width();
                            var startHidth = $firstBox.height();
                            var endWidth = $secondBox.width();
                            var endHidth = $secondBox.height();
                            modifyLine(lines[i], xStart + startWidth / 2, yStart + startHidth / 2, xEnd + endWidth / 2, yEnd + endHidth / 2);
                        }
                    },
                    stop: function () {
                        $canvas.find('.chart-box').removeClass('border');
                        $(this).css('zIndex', 599);
                    }
                });
                $canvas.append($box);
            }
        });

        
        // 修改组件元素信息
        $property_btn_modify.on('click', function () {
            var $box = $property.data('target');
            $box.attr('proName', $property_name.val());
            $box.find('.name').text($property_name.val());
        });

        // 保存
        // 保存判断处理
        $save_btn.on('click',function(){
            var size=$canvas.find('.chart-box').size();
            if(size<=0){
                showMyAlert($('.m-alert'),'画布区无数据，请先自定义组件');
                return false;
            }
            $temp_name.val('');
            $save_modal.modal('show');
        });
        // 保存 数据的保存
        $save_modal_btn.on('click', function () {
            var name=$.trim($temp_name.val());
            if(!name){
                showMyAlert($('.m-alert'),'请输入模板名称');
                return false;
            }
            var saveData = [];
            var saveItem=[];
            var saveLineId = [];
            // 将需要保存的数据用savaData savaItem 保存
            $canvas.find('.chart-box').each(function (index, item) {
                var $item = $(item);
               
                var proname = $($item[0]).attr("proname");
                
                var saveLineList = $item.data("lineList");
                var itemClone = $item.clone();
                itemClone.data("lineList",saveLineList);
                saveItem.push($item.clone());
                saveData.push({
                    hostName:proname,
                    hostId: $item.attr('hostId'),
                    left: $item.css('left'),
                    top: $item.css('top'),
                    zIndex: $item.css('zIndex'),
                    attrLine : $item.attr('saveAddLine')
                })
            });
            var $option=$('<option value="'+name+'">'+name+'</option>');
            // 将保存的数据 使用自定义属性保存
            $option.data('saveItem',saveItem);
            $system_select.append($option);
            $save_modal.modal('hide');
            $save_success_modal.modal('show');
            // 用localstorage存储
             var id = zr.getId();
             zz = zrender.getInstance(id);
             $.each(zz.storage._roots,function(i,v){
                saveLineId.push(v.id)
             })
            var json = {
                dashboardName:name,
                data:saveData,
                lines:saveLineId
            }
            
            if(GLOBAL_DEBUG){
                // 保存接口
                var url = GLOBAL_AJAX_URL.addsavedata;
                
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: json,
                    dataType:"json",
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader("Content-Type", "application/json");
                    },
                    success: function(res){
                        alert("保存成功")
                    }
                  });
            }else {
                var res = window.localStorage.getItem("tw");
                res = JSON.parse(res);
                if(!res){
                     res = {
                        mes:'成功',
                        data:[]
                    }
                }
                var allOption = res.data;
                allOption.push(json);
                var tw = JSON.stringify(res);
                window.localStorage.setItem("tw",tw);
            }
        });
        // 渲染之前保存的数据
        // option 渲染
        $system_select.on("click",function(){
            $system_select.html('<option value="">请选择</option>');
             // localstorage  设置及调用
            var allOption = null;
            if(GLOBAL_DEBUG){
                $.get(GLOBAL_AJAX_URL.innerdata,function(res){
                    allOption = res.data;
                })
                }else {
                var res = window.localStorage.getItem("tw");
                res = JSON.parse(res);
                if(!res){
                        res = {
                            mes:'成功',
                            data:[]
                        }   
                }
                    allOption = res.data;
            }
            $.each(allOption,function(i,v){
                var $option=$('<option value="'+v.dashboardName+'">'+v.dashboardName+'</option>');
                $system_select.append($option);
            });

           // 画布内的渲染
            $system_select.on("change",function(){
                var $this=$(this);
                var _val=$this.val();
                if(!_val){
                    return false;
                }
                // 清除画布
                zr.clear();
                $canvas.find('.chart-box').remove();
                // 渲染保存组件于画布上
                var $selectedOption=$this.find('option:selected');
                var optionVal = $selectedOption.val()
                var firstItem = null;
                var secondItem = null;
                $.each(allOption,function(i,v){
                    var itemName = v.dashboardName;
                    if(itemName == optionVal) {
                        var chartlis = v.data;
                        
                        $.each(chartlis,function(k,val){
                            var hostName = val.hostName
                            var zIndex = val.zIndex;
                            var left = val.left;
                            var top =  val.top;
                            var attrLine = val.attrLine;
                            var hardware_id = val.hostId;
                            var $box = null;
                            switch (hardware_id) {
                                case '1':
                                    $.getJSON('json/switchboard.json', function (res) {
                                        var nameClass = '';
                                        if (res.status == '1') {
                                            nameClass = 'white';
                                        } else if (res.status == '2') {
                                            nameClass = 'yellow';
                                        } else if (res.status == '3') {
                                            nameClass = 'red';
                                        }
                                        $box = $('<a hostId="' + hardware_id + '" proName="' + hostName + '" href="#" class="chart-box"><div class="info ' + nameClass + '">' + res.info + '</div><div class="chart"><img src="' + res.img + '" /><span class="name ' + nameClass + '">' + hostName + '</span></div><div class="operation"><span title="编辑" class="glyphicon glyphicon-edit"></span><span title="连线" class="glyphicon glyphicon-sort"></span><span title="删除" class="glyphicon glyphicon-trash"></span></div></a>').css({
                                            position: 'absolute',
                                            top: top,
                                            left: left
                                        });
                                    });
                                    break;
                                case '2':
                                    $.getJSON('json/server.json', function (res) {
                                        var nameClass = '';
                                        if (res.status == '1') {
                                            nameClass = 'white';
                                        } else if (res.status == '2') {
                                            nameClass = 'yellow';
                                        } else if (res.status == '3') {
                                            nameClass = 'red';
                                        }
                                        $box = $('<a hostId="' + hardware_id + '" proName="' + hostName + '" href="#" class="chart-box"><div class="info ' + nameClass + '">' + res.info + '</div><div class="chart"><img src="' + res.img + '" /><span class="name ' + nameClass + '">' + hostName + '</span></div><div class="operation"><span title="编辑" class="glyphicon glyphicon-edit"></span><span title="连线" class="glyphicon glyphicon-sort"></span><span title="删除" class="glyphicon glyphicon-trash"></span></div></a>').css({
                                            position: 'absolute',
                                            top: top,
                                            left: left
                                        });
                                        
                                    });
                                    break;
                                case '3':
                                    $.getJSON('json/system.json', function (res) {
                                        var nameClass = '';
                                        if (res.status == '1') {
                                            nameClass = 'white';
                                        } else if (res.status == '2') {
                                            nameClass = 'yellow';
                                        } else if (res.status == '3') {
                                            nameClass = 'red';
                                        }
                                        $box = $('<a hostId="' + hardware_id + '" proName="' + hostName + '" href="#" class="chart-box"><div class="info ' + nameClass + '">' + res.info + '</div><div class="chart"><img src="' + res.img + '" /><span class="name ' + nameClass + '">' + hostName + '</span></div><div class="operation"><span title="编辑" class="glyphicon glyphicon-edit"></span><span title="连线" class="glyphicon glyphicon-sort"></span><span title="删除" class="glyphicon glyphicon-trash"></span></div></a>').css({
                                            position: 'absolute',
                                            top: top,
                                            left: left
                                        });
                                    });
                                    break;
                                default:
                                    $.getJSON('json/server.json', function (res) {
                                        var nameClass = '';
                                        if (res.status == '1') {
                                            nameClass = 'white';
                                        } else if (res.status == '2') {
                                            nameClass = 'yellow';
                                        } else if (res.status == '3') {
                                            nameClass = 'red';
                                        }
                                        $box = $('<a hostId ="' + hardware_id + '" proName="' + hostName + '" href="#" class="chart-box"><div class="info ' + nameClass + '">' + res.info + '</div><div class="chart"><img src="' + res.img + '" /><span class="name ' + nameClass + '">' + hostName + '</span></div><div class="operation"><span title="编辑" class="glyphicon glyphicon-edit"></span><span title="连线" class="glyphicon glyphicon-sort"></span><span title="删除" class="glyphicon glyphicon-trash"></span></div></a>').css({
                                            position: 'absolute',
                                            top: top,
                                            left: left
                                        });
                                        
                                    });
                                    break;
                            };
                            if(attrLine){
                                $box.attr("saveAddLine",attrLine)
                            }
                            $box.data('lineList', []);
                            $box.data('anotherBox', []);
                            $canvas.append($box);
                            // 删除组件
                            $box.find('.glyphicon-trash').click(function () {
                                var lineList = $box.data('lineList');
                                var anotherBox = $box.data('anotherBox');
                                for (var i = 0, ilen = lineList.length; i < ilen; i++) {
                                    var itemLine = lineList[i];
                                    var firstBox = itemLine.firstBox;
                                    var secondBox = itemLine.secondBox;
                                    if (firstBox[0] == $box[0]) {
                                        secondBox.data('lineList').removeByValue(itemLine);
                                    } else {
                                        firstBox.data('lineList').removeByValue(itemLine);
                                    }
                                    zr.delElement(itemLine);
                                }
                                for (var j = 0, jlen = anotherBox.length; j < jlen; j++) {
                                    $(anotherBox[j]).data('anotherBox').removeByValue($box[0]);
                                }
                                // 画布重新渲染 (去除线条)
                                zr.refresh();
                                // 移除当前删除的元素
                                $box.remove();
                                return false;
                            });
                            
                            // 连线
                            $box.find('.glyphicon-sort').click(function () {
                                $(this).parents('.chart-box').addClass('line');
                                var $shouldLine = $canvas.find('.chart-box.line');
                                var size = $shouldLine.size();
                                if (size == 2) {
                                    var $firstBox = $($shouldLine[0]);
                                    var $secondBox = $($shouldLine[1]);
                                    // 创建当前的时间戳
                                    var nums = (new Date()).valueOf();
                                   
                                    if($firstBox.attr("saveAddLine")){
                                        var addAttr = $firstBox.attr("saveAddLine");
                                        $firstBox.attr("saveAddLine",nums +"-"+ addAttr);
                                        
                                    }else {
                                        $firstBox.attr("saveAddLine",nums+"");
                                        
                                    }
                                    if($secondBox.attr("saveAddLine")){
                                        var addAttr = $secondBox.attr("saveAddLine");
                                        $secondBox.attr("saveAddLine",nums +"-"+ addAttr);
                                        
                                    }else {
                                        $secondBox.attr("saveAddLine",nums+"");
                                        
                                    }
                                    
                                    $shouldLine.removeClass('line');
                                    
                                    if ($firstBox.data('anotherBox').hasByValue($secondBox[0])) {
                                        return false;
                                    }
                                    var xStart = parseInt($firstBox.css('left'));
                                    var yStart = parseInt($firstBox.css('top'));
                                    var xEnd = parseInt($secondBox.css('left'));
                                    var yEnd = parseInt($secondBox.css('top'));
                                    var startWidth = $firstBox.width();
                                    var startHidth = $firstBox.height();
                                    var endWidth = $secondBox.width();
                                    var endHidth = $secondBox.height();
                                    var line = addLine(xStart + startWidth / 2, yStart + startHidth / 2, xEnd + endWidth / 2, yEnd + endHidth / 2,nums);
                                    line.firstBox = $firstBox;
                                    line.secondBox = $secondBox;
                                    $firstBox.data('lineList').push(line);
                                    $firstBox.data('anotherBox').push($secondBox[0]);
                                    $secondBox.data('lineList').push(line);
                                    $secondBox.data('anotherBox').push($firstBox[0]);
                                    
                                }
                                return false;
                            });
                            // 编辑
                            $box.find('.glyphicon-edit').click(function () {
                                
                                var $box = $(this).parents('.chart-box');
                                
                                $property.data('target', $box);
                                $property_name.val($box.attr('proName'));
                                $property.removeClass('hide');
                                return false;
                            });
                        });
                        var lineArr = v.lines;
                        $.each(lineArr,function(i,v){
                            var line = v+"";
                            
                            var charts = $canvas.find(".chart-box");
                            for(var i = 0 ;i < charts.length; i++){
                                var chartItem = charts[i];
                               
                                var chartItemAttr = $(chartItem).attr("saveAddLine");
                               
                                if(chartItemAttr.indexOf(line)>-1) {
                                    firstItem = chartItem;
                                    break
                                }
                            };
                            $.each(charts,function(i,v){
                                var chartItem = v;
                                var itemAttr = $(v).attr("saveAddLine");
                                
                                if(itemAttr.indexOf(line)>-1 && firstItem!=chartItem){
                                    
                                    secondItem = chartItem;
                                };
                                
                            });
                           
                            var xStart = parseInt($(firstItem).css('left'));
                            var yStart = parseInt($(firstItem).css('top'));
                            var xEnd = parseInt($(secondItem).css('left'));
                            var yEnd = parseInt($(secondItem).css('top'));
                            var startWidth = $(firstItem).width();
                            var startHidth = $(firstItem).height();
                            var endWidth = $(secondItem).width();
                            var endHidth = $(secondItem).height();
                            var line = addLine(xStart + startWidth / 2, yStart + startHidth / 2, xEnd + endWidth / 2, yEnd + endHidth / 2,line);
                            line.firstBox = $(firstItem);
                            line.secondBox = $(secondItem);
                            $(firstItem).data('lineList').push(line);
                            $(firstItem).data('anotherBox').push($(secondItem)[0]);
                            $(secondItem).data('lineList').push(line);
                            $(secondItem).data('anotherBox').push($(firstItem)[0]);
                            
                        })
                    }
                });
    
                var charts = $canvas.find(".chart-box");
                $(charts).draggable({
                    containment: 'parent',
                    snap: true,
                    snapMode: 'outer',
                    start: function () {
                        $canvas.find('.chart-box').addClass('border');
                        $(this).css('zIndex', 600);
                    },
                    drag: function () {
                        var $this = $(this);
                        var lines = $this.data('lineList');
                        
                        for (var i = 0, len = lines.length; i < len; i++) {
                            var $firstBox = lines[i].firstBox;
                            var $secondBox = lines[i].secondBox;
                            var xStart = parseInt($firstBox.css('left'));
                            var yStart = parseInt($firstBox.css('top'));
                            var xEnd = parseInt($secondBox.css('left'));
                            var yEnd = parseInt($secondBox.css('top'));
                            var startWidth = $firstBox.width();
                            var startHidth = $firstBox.height();
                            var endWidth = $secondBox.width();
                            var endHidth = $secondBox.height();
                            modifyLine(lines[i], xStart + startWidth / 2, yStart + startHidth / 2, xEnd + endWidth / 2, yEnd + endHidth / 2);
                        }
                    },
                    stop: function () {
                        $canvas.find('.chart-box').removeClass('border');
                        $(this).css('zIndex', 599);
                    }
                });
                
            });
        })
        
        
       


        
        $('#box_inner').on('click', '.back', function () {
            $('#box_inner').addClass('hide');
            $("#pageBox").removeClass('hide')
        });
        //显示提示信息
        var SHOW_MY_ALERT_TIME=null;
        function showMyAlert($alert,content){
            $alert.find('.closed').off('click');
            $alert.find('.closed').on('click',function(){
                $alert.removeClass('show');
            })
            if(SHOW_MY_ALERT_TIME){
                clearTimeout(SHOW_MY_ALERT_TIME);
                SHOW_MY_ALERT_TIME=null;
            }
            $alert.find('.content').text(content);
            $alert.addClass('show');
            SHOW_MY_ALERT_TIME=setTimeout(function(){
                $alert.removeClass('show');
            },2000)
        }
    });
})

